<template>
    <view class="bg-white">
        <uni-segmented-control :current="current" activeColor="#dd524d" styleType="text" :values="['關注', '粉絲']"
            @clickItem="onClickItem" />
        <view class="content">
            <!-- 关注 -->
            <view v-show="current === 0">
                <uni-list-chat link :to="'/pages/author/index?userId=' + item.user.id" v-for="(item, index) in focus"
                    :key="index" :avatar-circle="true" :title="item.user.name" :avatar="item.user.avatar"
                    :note="item.user.brief">
                    <view @click.stop="focusUser(item.user.id, userId, true)"
                        class="border-red-700 border border-solid w-16 text-center rounded-3xl text-red-600 text-xs m-auto uni-py-2">
                        {{ item.both ? '相互關注' : '已關注' }}</view>
                </uni-list-chat>
                <view v-if="focus.length === 0" class="text-center text-gray-400 text-xs uni-my-10">還沒有關注任何夥伴喔</view>
            </view>
            <!-- 粉丝 -->
            <view v-show="current === 1">
                <uni-list-chat link :to="'/pages/author/index?userId=' + item.user.id" v-for="(item, index) in fans"
                    :key="index" :avatar-circle="true" :title="item.user.name" :avatar="item.user.avatar"
                    :note="item.user.brief">
                    <view @click.stop="focusUser(item.user.id, userId, item.both)"
                        class="border-red-700 border border-solid w-16 text-center rounded-3xl text-red-600 text-xs m-auto uni-py-2">
                        {{ item.both ? '相互關注' : '回粉' }}</view>
                </uni-list-chat>
                <view v-if="fans.length === 0" class="text-center text-gray-400 text-xs uni-my-10">還沒有被粉絲關注喔</view>
            </view>
        </view>

    </view>
</template>
  
<script>
import {
    httpUserInfoFocus,
    httpUserInfoFans,
    httpUserFocus
} from '@/utils/api.js'
export default {
    data() {
        return {
            current: 0,
            focus: [],
            fans: [],
            userId: ''
        }
    },
    onLoad(options) {
        this.current = Number(options.index)
        this.userId = Number(options.userId)
        uni.setNavigationBarTitle({
            title: options.userName || '信息页'
        })
        this.getUserFocus(this.userId)
        this.getUserFans(this.userId)
    },
    methods: {
        // 关注用户
        async focusUser(userId, fansId, isFocus) {
            if (isFocus) {
                uni.showModal({
                    title: '确认不再关注？',
                    success: async (res) => {
                        if (res.confirm) {
                            const { code } = await httpUserFocus(userId, fansId, true)
                            if (code === 200) {
                                this.getUserFocus(this.userId)
                                this.getUserFans(this.userId)
                            }
                        }
                    }
                })
            } else {
                const { code } = await httpUserFocus(userId, fansId)
                if (code === 200) {
                    this.getUserFocus(this.userId)
                    this.getUserFans(this.userId)
                }
            }
        },
        // 切换
        onClickItem(e) {
            if (this.current !== e.currentIndex) {
                this.current = e.currentIndex
            }
        },
        // 加载用户的关注
        async getUserFocus(userId) {
            const { code, data } = await httpUserInfoFocus(userId)
            if (code === 200) {
                this.focus = data
            }
        },
        // 加载用户的粉丝
        async getUserFans(userId) {
            const { code, data } = await httpUserInfoFans(userId)
            if (code === 200) {
                this.fans = data
            }
        },
    }
}
</script>
  
<style lang="scss" scoped></style>